<template>
  <PageWrapper>
    <a-card :bordered="false">
      <BasicTable @register="registerTable" />
    </a-card>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { PageWrapper } from "/@/components/Page"
  import { BasicTable, useTable } from "/@/components/Table"
  import { mapTableTotalSummary } from "/@/utils/common/compUtils"

  const [registerTable] = useTable({
    rowKey: "id",
    bordered: true,
    canResize: false,
    columns: [
      { title: "姓名", dataIndex: "name" },
      { title: "贡献点", dataIndex: "point" },
      { title: "等级", dataIndex: "level" },
      { title: "更新时间", dataIndex: "updateTime" },
    ],
    dataSource: [
      { id: 0, name: "张三", point: 23, level: 3, updateTime: "2019-8-14" },
      { id: 1, name: "小鹿", point: 33, level: 9, updateTime: "2019-8-10" },
      { id: 2, name: "小王", point: 6, level: 1, updateTime: "2019-8-13" },
      { id: 3, name: "李四", point: 53, level: 8, updateTime: "2019-8-12" },
      { id: 4, name: "小红", point: 44, level: 5, updateTime: "2019-8-11" },
      { id: 5, name: "王五", point: 97, level: 10, updateTime: "2019-8-10" },
      { id: 6, name: "小明", point: 33, level: 2, updateTime: "2019-8-10" },
      { id: 7, name: "小张", point: 33, level: 4, updateTime: "2019-8-10" },
      { id: 8, name: "小六", point: 33, level: 2, updateTime: "2019-8-10" },
      { id: 9, name: "小五", point: 33, level: 7, updateTime: "2019-8-10" },
      { id: 10, name: "小赵", point: 33, level: 2, updateTime: "2019-8-10" },
      { id: 11, name: "李华", point: 33, level: 8, updateTime: "2019-8-10" },
      { id: 12, name: "小康", point: 33, level: 5, updateTime: "2019-8-10" },
    ],
    // 显示底部合计
    showSummary: true,
    // 底部合计计算方法
    summaryFunc: onSummary,
  })

  function onSummary(tableData: Recordable[]) {
    // 可用工具方法自动计算合计
    const totals = mapTableTotalSummary(tableData, ["point", "level"])
    return [
      totals,
      {
        _row: "平均",
        _index: "平均",
        // 计算平均值
        point: (totals.point / tableData.length).toFixed(2),
        level: (totals.level / tableData.length).toFixed(0),
      },
    ]
  }
</script>
